<template>
  <div class="full relative bgc_212121" id="screen" ref="screen">
    <!-- threejs 3d 大屏 -->
    <div class="full absolute top_0 left_0 z_-1">
      <ThreejsMap @chick3DMap="chick3DMap" />
    </div>

    <!-- Header -->
    <div class="w_full h_60 lh_50 absolute top_0 left_0">
      <Header :headerName="headerName" :headerStyle="headerStyle" />
    </div>

    <!-- 1 -->
    <div class="w_25_p h_full-70 absolute top_60 left_20 flex_column_between gap_10">
      <!-- 牲畜存栏免疫统计 -->
      <div class="w_full h_50_p p_10 box_bgi">
        <DataChart title="牲畜存栏免疫统计" path='' chartType="双柱图" :chartData="chartData1" filterText="" :filterList="[]"
          :isShowUnit="false" :isShowFilterIcon="false" :isShowFullIcon="false" />
      </div>

      <!-- 防疫站列表 -->
      <div class="w_full h_50_p p_10 box_bgi">
        <div class="w_full chart_title">动防站列表</div>
        <div class="w_full h_full-25 flex_column_between p_10">
          <div class="fs_20 color_fff cursor" v-for="(item, index) in townList" :key="index"
            @click="goToFangYiZhan(item)">{{
              index + 1 + '. ' +
              item.name + '动防站' }}</div>
        </div>
      </div>
    </div>

    <!-- 2 -->
    <div class="w_50_p absolute top_60 left_center flex_row_start gap_10 main_color">

    </div>

    <!-- 3 -->
    <div class="w_25_p h_full-70 absolute top_60 right_20 flex_column_between gap_10">
      <!-- 牲畜免疫明细 -->
      <div class="w_full h_50_p p_10 box_bgi relative">
        <div class="w_full flex_row_around absolute top_50 left_0 z_999">
          <div class="cursor" :class="activeAniamlName == '牛' ? 'main_color' : 'color_fff'" @click="clickAnimal('牛')">牛
          </div>
          <div class="cursor" :class="activeAniamlName == '山羊' ? 'main_color' : 'color_fff'" @click="clickAnimal('山羊')">
            山羊</div>
          <div class="cursor" :class="activeAniamlName == '绵羊' ? 'main_color' : 'color_fff'" @click="clickAnimal('绵羊')">
            绵羊</div>
          <div class="cursor" :class="activeAniamlName == '猪' ? 'main_color' : 'color_fff'" @click="clickAnimal('猪')">猪
          </div>
        </div>
        <DataChart title="牲畜免疫明细" path="" chartType="环状图" :chartData="chartData2" filterText="" filterId=""
          :filterList="[]" :isShowUnit="false" :isShowFilterIcon="false" :isShowFullIcon="false" />
      </div>

      <!-- 疫苗库存信息 -->
      <div class="w_full h_50_p p_10 box_bgi">
        <DataChart title="疫苗库存信息" path="" chartType="柱状图3" :chartData="chartData3" filterText="" filterId=""
          :filterList="[]" :isShowUnit="true" :isShowFilterIcon="false" :isShowFullIcon="false" />
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import Header from '../common/Header.vue'
import ThreejsMap from '../common/3d-map/index.vue'
import DataChart from '../components/data-chart/index.vue'
import { ref, reactive, computed, onMounted, watch, provide, nextTick } from 'vue'
import screenfull from 'screenfull'

import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const headerName = ref('西乌珠穆沁旗牲畜免疫信息')
const headerStyle = reactive({
  color: '#00A295',
  fontWeight: 500,
  fontSize: '20px'
})

const activeAniamlName = ref('牛')

const chartData1 = reactive({})
const chartData2 = reactive({})
const chartData3 = reactive({})

const window_width = window.innerWidth
const window_height = window.innerHeight

const screen = ref()
const isFullscreen = ref(false)

const townList = reactive([
  { name: '乌审召镇' },
  { name: '图克镇' },
  { name: '嘎鲁图镇' },
  { name: '乌兰掏勒盖镇' },
  { name: '苏力德苏木乡' },
  { name: '无定河镇' }
])

onMounted(() => {
  initChartData()
})

const initChartData = () => {
  chartData1.x = ['牛', '山羊', '绵羊', '猪', '禽', '马'].reverse()
  chartData1.data1 = {
    name: '存栏',
    data: [4503, 7205, 7648, 2885, 10300, 8102].reverse()
  }
  chartData1.data2 = {
    name: '免疫',
    data: [2829, 4646, 4815, 1447, 6550, 3134].reverse()
  }

  chartData2.unit = '毫升'
  chartData2.data = [
    { name: '小反刍', value: 165298 },
    { name: '口蹄疫', value: 1098256 },
    { name: '布病A9', value: 10973 }
  ]

  chartData3.unit = '毫升 / 头份'
  chartData3.x = ['小反刍', '口蹄疫', '布病A9', '气肿宜', '布病S2',]
  chartData3.y = [4503, 7205, 7648, 2885, 10300]
}

// 全屏
function handleClickFullIcon() {
  const element = document.getElementById('screen');//指定全屏区域元素

  // 如果不允许进入全屏，发出不允许提示 浏览器不能全屏
  if (!screenfull.isEnabled) {
    ElMessage({
      message: '浏览器不能全屏，安装其他版本试试',
      type: 'warning',
      duration: 1 * 1000
    })
    return false
  }

  isFullscreen.value = !isFullscreen.value
  screenfull.request(element)
  // 调用 screenfull.toggle() 可以双向切换全屏与非全屏
  screenfull.toggle()
}

// 点击 项目 item
function clickProjectItem(item) {
  activeProjectItem.id = item.id
  activeProjectItem.itemCode = item.itemCode
}

// 点击 地图块
function chick3DMap(mapName) {

  // router.push(`/townPage/${mapName}`)
  router.push({
    path: '/townPage',
    query: { mapName }
  })
}

// 点击 防疫站
function goToFangYiZhan(item) {
  router.push({
    path: '/fangYiZhanPage',
    query: { name: item.name }
  })
}

// 点击 牲畜 名称
function clickAnimal(animalName) {
  activeAniamlName.value = animalName
  if (animalName == '牛') {
    chartData2.data = [
      { name: '口蹄疫', value: 1098256 },
      { name: '布病A9', value: 10973 }
    ]
  } else if (animalName == '山羊') {
    chartData2.data = [
      { name: '小反刍', value: 8256 },
      { name: '布病A9', value: 6973 }
    ]
  } else if (animalName == '绵羊') {
    chartData2.data = [
      { name: '小反刍', value: 7324 },
      { name: '布病A9', value: 9973 }
    ]
  } else if (animalName == '猪') {
    chartData2.data = [
      { name: '猪蓝耳', value: 256 },
    ]
  }
}


</script>

<style>
.box_bgi {
  /* width: 100%;
  height: 100%; */
  /* border: 1px solid #f00; */
  position: relative;
}
</style>